import React from 'react';

import { ButtonSize } from 'antd/lib/button';
import { RadioChangeEvent } from 'antd/lib/radio';
import { Card, Button, Radio, Menu, Dropdown } from 'antd';
import { DownloadOutlined, PoweroffOutlined } from '@ant-design/icons';
import { ButtonsWrap } from './StyleUi'

type ButtonsState = {
  size: ButtonSize;
  loadings: boolean[];
}

class Buttons extends React.Component<any, ButtonsState> {
  constructor(props: any) {
    super(props);
    this.state = {
      size: 'large',
      loadings: []
    };
  }

  handleSizeChange = (e: RadioChangeEvent) => {
    this.setState({ size: e.target.value });
  };

  handleMenuClick = (e: any) => {
    console.log('click', e);
  }

  enterLoading = (index: number) => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    setTimeout(() => {
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
    }, 6000);
  };

  render() {
    const { size, loadings } = this.state;
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1">1st item</Menu.Item>
        <Menu.Item key="2">2nd item</Menu.Item>
        <Menu.Item key="3">3rd item</Menu.Item>
      </Menu>
    );
    return (
      <ButtonsWrap>
        <Card title="按钮尺寸" headStyle={{backgroundColor: '#fafafa'}} extra={<a href="https://ant.design/components/button-cn/">More</a>}>
          <div>按钮有大、中、小三种尺寸。通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。</div>
          <br />
          <Radio.Group value={size} onChange={this.handleSizeChange}>
            <Radio.Button value="large">Large</Radio.Button>
            <Radio.Button value="default">Default</Radio.Button>
            <Radio.Button value="small">Small</Radio.Button>
          </Radio.Group>
          <br />
          <br />
          <Button type="primary" size={size}>
            Primary
          </Button>
          <Button size={size}>Default</Button>
          <Button type="dashed" size={size}>
            Dashed
          </Button>
          <br />
          <Button type="text">Text Button</Button>
          <Button type="link" size={size}>
            Link
          </Button>
          <br />
          <Button type="primary" icon={<DownloadOutlined />} size={size} />
          <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
          <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
          <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
            Download
          </Button>
          <Button type="primary" icon={<DownloadOutlined />} size={size}>
            Download
          </Button>
        </Card>
        <Card title="多个按钮组合"  headStyle={{backgroundColor: '#fafafa'}} style={{marginTop:'16px'}} extra={<a href="https://github.com/ant-design/ant-design/edit/master/components/button/demo/multiple.md">More</a>}>
          <div>按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。</div>
          <br />
          <Button type="primary">primary</Button>
          <Button>secondary</Button>
          <Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
        </Card>
        <Card title="加载中状态" headStyle={{backgroundColor: '#fafafa'}} style={{marginTop:'16px'}}>
          <div>添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。</div>
          <br />
          <Button type="primary" loading>
            Loading
          </Button>
          <Button type="primary" size="small" loading>
            Loading
          </Button>
          <Button type="primary" icon={<PoweroffOutlined />} loading />
          <br />
          <Button type="primary" icon={<PoweroffOutlined />} loading={loadings[0]} onClick={() => this.enterLoading(0)}>
            Click me!
          </Button>
          <Button
            type="primary"
            icon={<PoweroffOutlined />}
            loading={loadings[1]}
            onClick={() => this.enterLoading(1)}
          >
            Click me!
          </Button>
          <Button
            type="primary"
            icon={<PoweroffOutlined />}
            loading={loadings[2]}
            onClick={() => this.enterLoading(2)}
          />
        </Card>
      </ButtonsWrap>
    );
  }
}

export default Buttons;
